<template>
	<!-- 查询 -->
	<div>
		<BasicTable ref="basicTable" :title="''" :columns="columns" :pagination="{show:false}" :tableData="tableData">
			<template v-slot:toolRight>
				<n-button type="primary" class="mr-10" size="tiny" @click="addOrEditDict()">新增</n-button>
			</template>
		</BasicTable>
	</div>
</template>

<script setup lang="ts">
	import { reactive, ref,h,defineProps } from 'vue';
	import { BasicTable } from '@/components/Common/BasicTable';
	import { NButton, useMessage } from 'naive-ui'
	import type { DataTableColumns } from 'naive-ui'
	type props = {
		tableData: Array<Object>
	}
	type RowData = {
		dict_name:String,
		dict_code:String,
		sort:Number,
		id:String
	}
	const props = withDefaults(defineProps<props>(),{
		tableData:()=>[]
	})
	const message = useMessage()
	const columns:DataTableColumns = reactive([
		{
			title: '字段名称',
			key: 'dict_name'
		},
		{
			title: '字段值',
			key: 'dict_code'
		},
		{
			title: '字典排序',
			key: 'sort'
		},
		{
			title: '操作',
			key: 'actions',
			render(row) {
				return  [
					h(
						NButton,
						{
							size: 'small',
							type: 'primary',
							onClick: () => addOrEditDict(row, true)
						},
						{ default: () => '编辑' }
					),
					h(
						NButton,
						{
							size: 'small',
							class: 'ml-10',
							type: 'error',
							onClick: () => deleteDict(row)
						},
						{ default: () => '删除' }
					)
				]
			}
		}
	])
	const departDrawer = ref(null)
	function addOrEditDict(row:RowData,flag: Boolean | null){
		departDrawer.value?.open(row,flag)
	}
	function deleteDict(row:RowData){
		message.success('删除成功')
	}
</script>

<style>
</style>